<template>
  <div class="ToolingPreLend">
    <el-row style="paddingBottom: 0">
      <el-col :span="24">
        <dynForm :info-form="infoForm" :search-tags="searchTags" :select-list="selectList">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="doSearch"
          >
            {{ $t("search") }}</el-button>
        </dynForm>
      </el-col>
    </el-row>
    <div class="table-buttons">
      <el-button type="primary" icon="el-icon-plus" @click="openCreate">
        {{ $t('generateRequisition') }}
      </el-button>
      <el-button type="primary" icon="el-icon-edit" @click="openLend">
        {{ $t('lend') }}</el-button
        >
      <el-button
        v-btnPermission:delete
        :disabled="DeleteDisabled"
        type="danger"
        icon="el-icon-delete"
        @click="handleDel">{{
          $t("delete")
        }}</el-button>
    </div>
    <!-- 表单部分 -->
    <el-card shadow="never">
      <el-row>
        <dynTable
          ref="dynTable"
          :loading="tableLoading"
          :table-data="tableData"
          :table-columns="tableColumns"
          :handle-selection-change="handleSelectionChange"
          :row-click="rowClick"
        />
      </el-row>
      <pagination
        :total="total"
        :page.sync="listQuery.page"
        :size.sync="listQuery.size"
        @pagination="getList"
      />
    </el-card>
    <!-- 生成领用单弹窗 -->
    <createDialog ref="createDialog" @initList="initList"/>
    <!-- 借用弹窗 -->
    <lendDialog ref="lendDialog" @initList="initList"/>
  </div>
</template>
<script>
import toolingPreLendApi from '@/api/Tooling/toolingPreLend'
import eqpbaseApi from '@/api/equipment/eqpbase'
import { getModuleList } from '@/api/public'
import mySetting from '@/mixins/mySetting'
import networkTips from '@/mixins/networkTips'
import createDialog from './components/createList'
import lendDialog from './components/lendForm'
export default {
  name: 'ToolingPreLend',
  components: { createDialog, lendDialog },
  mixins: [mySetting, networkTips],
  data() {
    return {
      infoForm: {},
      searchTags: [
        { label: this.$t('PrelendNo'), prop: 'PrelendNo', tag: 'DynInput' },
        { label: this.$t('eqpName'), prop: 'EqpName', tag: 'DynSelect' },
        { label: this.$t('effective'), prop: 'IsValid', tag: 'DynSelect', translate: true },
        { label: this.$t('createTime'), prop: '', tag: 'Dyndaterange', event: (value) => {
          this.infoForm.StartCreateTime = Array.isArray(value) ? value[0] : null
          this.infoForm.EndCreateTime = Array.isArray(value) ? value[1] : null
        } }
      ],
      selectList: {},
      tableColumns: [
        { prop: '', label: '', type: 'selection' },
        { prop: '', label: this.$t('index'), type: 'index', width: '50px', templete: (_scope) => {
          return (
            <span>{ (this.listQuery.page - 1) * this.listQuery.size + _scope.$index + 1 }</span>
          )
        } },
        { prop: 'prelendNo', label: this.$t('PrelendNo'), width: '200px' },
        { prop: 'eqpId', label: this.$t('eqpName') },
        { prop: 'workOrder', label: this.$t('workOrder'), width: '200px' },
        { prop: 'custName', label: this.$t('customer') },
        { prop: 'productName', label: this.$t('productName') },
        { prop: 'valid', label: this.$t('effective'), templete: (_scope) => {
          return (
            <el-tag type={this.filterTag(_scope.row.valid)} effect='dark'>
              { _scope.row.valid ? 'PASS' : 'Fail' }
            </el-tag>
          )
        } },
        { prop: 'creator', label: this.$t('creator') },
        { prop: 'createTime', label: this.$t('createTime'), width: '170px' }
      ],
      tableLoading: true
    }
  },
  computed: {},
  watch: {},
  created() {
    this.initList()
    this.getHandleList()
    this.doVail()
  },
  mounted() {},
  methods: {
    // 初始化
    async initList() {
      const res = await toolingPreLendApi.getList(this.$clearNull({ ...this.infoForm, ...this.listQuery }))
      this.tableData = res.data
      this.total = res.total
      this.tableLoading = false
    },
    // 查询
    doSearch() {
      this.listQuery.page = 1
      this.initList()
    },
    // 删除数据
    handleDel() {
      this.$confirm(
        this.$t('confirmDelete') +
        this.multipleSelection.length +
        this.$t('recordCount'),
        this.$t('tip'),
        {
          confirmButtonText: this.$t('confirm'),
          cancelButtonText: this.$t('cancel'),
          type: 'warning'
        }
      ).then(() => {
        const ids = this.multipleSelection.map((ele) => {
          return ele.id
        })
        toolingPreLendApi.doDelete({ ids }).then(res => {
          this.netTips(res, this.setOnePage, this.initList)
        })
      })
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    rowClick(row) {
      this.$refs.dynTable.$refs.multipleTable.toggleRowSelection(row)
    },
    // 获取设备名称
    async getHandleList() {
      const res = await eqpbaseApi.getHandleList()
      this.$set(this.selectList, 'EqpName', res.data)
    },
    // 设置有效无效
    async doVail() {
      const res = await getModuleList({ enumName: 'EntityStatus' })
      this.$set(this.selectList, 'IsValid', res.data)
    },
    // 打开生成表单弹窗
    openCreate() {
      this.$refs.createDialog.handleOpen()
    },
    // 打开借用弹窗
    openLend() {
      this.$refs.lendDialog.handleOpen(this.multipleSelection[0])
    },
    // 切换分页
    getList(val) {
      this.listQuery = val
      this.initList()
    },
    filterTag(val) {
      const list = {
        1: 'success',
        0: 'danger'
      }
      return list[val]
    }
  }
}
</script>
<style lang='scss' scoped>
@import "~@/assets/styles/defaultStyle.scss";
::v-deep .el-form {
  padding-top: 10px;
  //     .el-form-item{
  //   margin-bottom: 15px;
  // }
}
</style>
